﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="ExpandDirection.aspx.cs" Inherits="ControlExplorer.C1Expander.ExpandDirection" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Expander"
	TagPrefix="C1Expander" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
	<style type="text/css" media="all">
		.ui-expander-left.wijmo-wijexpander .ui-expander-header,
		.ui-expander-right.wijmo-wijexpander .ui-expander-header,
		.ui-expander-left.wijmo-wijexpander .ui-expander-header a,
		.ui-expander-right.wijmo-wijexpander .ui-expander-header a {
			width: 32px;
			text-align: center;
			text-overflow:ellipsis;
			overflow:hidden;
		}
	</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<C1Expander:C1Expander runat="server" ID="C1Expander1">
		<Header>
			头部
		</Header>
		<Content>
			C1Expander控件允许使用者通过点击扩展器头部头部来显示或者隐藏任何嵌入的或者外部内容。                   
		</Content>
	</C1Expander:C1Expander>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">

	<p>
		此示例展示了如何在客户端改变扩展内容框的方向。
	</p>
	<p>&nbsp;</p>
	<b>expandDirection</b> 选项被用来交换扩展方向：

<pre class="controldescription-code">
&lt;script type="text/javascript" language="javascript"&gt;
	function setExpandDirection(direction) {
		$("#&lt;%=C1Expander1.ClientID%&gt;")
				.c1expander("option", "expandDirection", direction);
	}
&lt;/script&gt;
</pre>
	
	<p>&nbsp;</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
<script type="text/javascript" language="javascript">
	function setExpandDirection(direction) {
		$("#<%=C1Expander1.ClientID%>").c1expander("option", "expandDirection", direction);
	}
</script>
    <fieldset class="radio">
        <legend>选择扩展方向</legend>
		<label><input type="radio" name="ExpandDirection" value="top" onclick="setExpandDirection('top');" />顶部</label>
		<label><input type="radio" name="ExpandDirection" value="right" onclick="setExpandDirection('right');" />右边</label>
		<label><input type="radio" name="ExpandDirection" value="bottom" onclick="setExpandDirection('bottom');" checked="checked" />底部</label>
		<label><input type="radio" name="ExpandDirection" value="left" onclick="setExpandDirection('left');" />左边</label>
    </fieldset>
</asp:Content>
